<template>
	<view class="content">
		<view class="cenHost">
			<view>
				<image :style="headStyle" class="headImg" :src="reviewMsg.user.avatar" />
			</view>
			<view class="cenHostMsgContent">

				<view class="username">
					<text>{{reviewMsg.user.nickname}}</text>
				</view>
				<!-- 發佈時間 -->
				<view class="sendtime u-f-ac u-f-jsb">
					<text class="textCenMsg">{{reviewMsg.publish_at}}</text>
				</view>
				<!-- 发布内容 -->
				<view @tap="review" class="cenHostReview">
					<view class="threeReviewVueText">
						<template v-if="reviewMsg.reply.nickname">
							回复		
							<text class="name">@{{reviewMsg.reply.nickname}}</text>
							<text class="maohao">:</text>
						</template>
						{{reviewMsg.content}}
					</view>
				</view>

			</view>
			
		</view>
	</view>
</template>

<script>
	import dnIcon from '@/components/dn-icon/dn-icon.vue';
	import uniicon from '@/components/uni-icons/uni-icons.vue';
	
	export default {
		name: 'review',
		props: {
			reviewMsg: [Object],
			childData: [Array]
		},
		components: {
			uniicon,
			dnIcon
		},
		computed: {
			headStyle() {
				return `width: ${uni.upx2px(76)}px;height: ${uni.upx2px(76)}px;`

			}
		},
		data() {
			return {
				crControl: false
			}
		},
		onLoad() {

		},
		methods: {
			openChildReview(item) {
				// this.crControl = true;
				// this.$emit('childReview', item);
				uni.navigateTo({
					url: 'work/comment-detail/comment-detail'
				})
			},
			closeCr() {
				this.crControl = false;
			},
			review(){
				this.$emit('review',this.reviewMsg
				)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;

		background-color: #F9F9F9;

		.cenHost {
			position: relative;
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			border-bottom: 1upx solid #F2F2F2;
			margin-top: 5upx;

			/* 头像 */

			.headImg {
				width: 76upx;
				height: 76upx;
				margin: 28upx;
				border-radius: 50%;
			}

			.cenHostMsgContent {
				margin: 28upx 32upx 28upx 0upx;

				// 楼主 
				// 名
				.username {
					font-size: 28upx;
					color: rgba(91, 97, 100, 1);
				}

				// 内容
				.cenHostReview {
					font-size: 30upx;
					color: $b1;
					margin-bottom: 14upx;
				}

				// 发布时间
				.sendtime {
					.textCenMsg {
						color: $c1;
						font-size: 24upx;
					}
				}

				// 回复列表
					.threeReviewVueText {
						font-size: 28upx;
						color: #000000;

						.name {
							color: $a1;
						}

						.maohao {
							color: #000000;
							margin-right: 10upx;
						}
					}
				

				.reviewNumContent {
					color: $a1;
					font-size: 28upx;
					margin-top: 5upx;
				}

			}
		}
	}
</style>
